<template>
  <div>
    <el-container>
      <el-header>
        <div></div>
      </el-header>
      <el-main>
        <Row>
          <Col span="18" offset="3">
            <div>
              <span>选择题目类型</span>
              <Select v-model="questionTypes" style="width: 200px">
                <Option
                  v-for="(item, index) in questionTypeList"
                  :value="item.value"
                  :key="index"
                  @click.native="selectQuestionType(index)"
                  >{{ item.label }}</Option
                >
              </Select>
              <Card :style="{ height: contentHeight + 35 + 'px' }" style=" overflow: auto">
                <h2 style="text-align: center">{{ this.questionBank.info.name }}</h2>
                <br />
                <span style="margin-left: 20px">试卷说明：</span>
                <span>{{ this.questionBank.info.references }}</span>

                <div v-for="(ques, index) in questionData" :key="index">
                  <div style="margin-left: 20px; width: 80%">
                    <br /><br />
                    <span>{{ index + 1 }}. {{ ques.stem }}</span
                    ><br />
                    <span v-if="questionType === 0">（ ）</span>

                    <!-- <span style="text-align: left">({{ ques.score }}分)</span> -->
                    <p
                      v-if="questionType === 0"
                      v-for="(opt, option) in ques.options"
                      :key="option"
                    >
                      {{ opt }}
                    </p>
                    <br />
                  </div>
                </div>
              </Card>
            </div>
          </Col>
        </Row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { get, post, del, put } from "@/axios";
export default {
  data() {
    return {
      questions: [],
      contentHeight: "",
      questionData: [],
      questionType: 0,
      questionBank: [],
      questionTypes: "danxuan",
      questionTypeList: [
        {
          value: "danxuan",
          label: "单选题",
        },
        {
          value: "tiankong",
          label: "填空题",
        },
        {
          value: "panduan",
          label: "判断题",
        },
        {
          value: "wenda",
          label: "问答题",
        },
      ],
    };
  },
  
  created() {
    this.browseQuestions();
    this.initSize();
  },
  mounted() {
 
    window.addEventListener("resize", this.initSize);
  },
  beforeDestroy: function () {
    window.removeEventListener("resize", this.initSize);
  },
  methods: {
    initSize() {
      this.contentHeight = window.innerHeight - 140;
    },
    selectQuestionType(index) {
      // console.log(index);
      if (index === 0) {
        this.questionData = this.questionBank.singleSelect;
        // console.log(this.questionData);
        this.questionType = 0;
      } else if (index === 1) {
        this.questionData = this.questionBank.fillInBlank;
        // console.log(this.questionData);
        this.questionType = 1;
      } else if (index === 2) {
        this.questionData = this.questionBank.judgement;
        // console.log(this.questionData);
        this.questionType = 2;
      } else if (index === 3) {
        this.questionData = this.questionBank.quesAndAnswer;
        // console.log(this.questionData);
        this.questionType = 3;
      }
    },
    async browseQuestions() {
      let id = this.$route.query.value;
      // console.log(id);
      try {
        let res = await get("/visualResourceLibrary/questionnaire/quesBank/" + id);
        // console.log(res.data.data);
        this.questionBank = res.data.data;
        this.questionData = this.questionBank.singleSelect;
        // console.log(this.questionBank);
      } catch (e) {
        this.$Message.error("修改失败");
        console.log(e);
      }
    },
  },
};
</script>

<style scoped>
.button {
  background-color: #ccc;
  color: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.button.active {
  background-color: #f00;
}
.createTaskBtn {
  font-size: 10px;
}
.createTaskBtn:hover {
  color: white;
  background: #276be9;
}
.el-header {
  background-color: #152350c4;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;

  line-height: 20px;
}
.right-align {
  float: right;
}
.text-center {
  text-align: center;
}
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
